/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList, CCell, Cell, Table, TableBody, TableHead, TableRow, Text, TextArea,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, SelectInput, useItemInputControl} from "../../common/base";
import {useOmnipotentPrefMove, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {useMeasureInpFilter} from "../../common/hooks";
import {css} from "@emotion/react";
import {objNestSet} from "../../../common/tool";
import {concluF3Tran, 检查结论选} from "../../tools";
import {FootMenRow} from "../../contain/rarelyVary";
import {FootFlexMenBar} from "./repView";

/**@param op: 是不是正式报告的，否则给编辑器用的
 * */
const setConfigP =(orc:any,op:boolean)=> [
  ['任务书', [{t:'1', s:3},{t:'C1.1设计资料审查', s:3}], '(1)设计任务书，至少包括设计技术标准和法律法规依据、主要技术参数、使用环境条件等内容；',
          undefined,['设计任务书包括设计技术标准和法律法规依据、主要技术参数、使用环境条件等内容。'] ],
  ['原理图', [{}], '(2)主要设计图样，满足设计任务书要求，至少包括图纸目录、总图、主要受力结构件图（外购货叉除外）、制动原理图、电气原理图、液压或者气动系统原理图等；',
          undefined,['主要设计图样满足设计任务书要求，包括图纸目录、总图、主要受力结构件图、制动原理图、电气原理图、液压系统原理图。'] ],
  ['设计计算', [{}], op? '(3)设计计算书，满足设计任务书要求。至少包括以下内容：1)主要受力结构件强度、刚度的设计计算或者测试分析报告；2)主要工作机构部件的选型计算，至少包括发动机(行走电机)、制动器；3)叉车整机稳定性测试分析报告或者计算书、标示叉车额定起重量和实际起重量的载荷曲线图或者载荷表。'
                     :
          '(3)设计计算书，满足设计任务书要求。', undefined,['设计计算书满足设计任务书要求。'] ],
  ['制造许可', [{t:'2', s:3},{t:'C1.2制造资料审查', s:3}], '(1)境内制造单位的特种设备生产许可证明；',
        undefined,['制造单位的特种设备生产许可证符合要求。'] ],
  ['合格证', [{}], op? `(2)产品质量合格证明、使用维护说明书；使用维护说明书至少包括以下内容：1)主要性能参数、用途及其对使用环境的要求；2)制动系统、电气系统和液压系统(或者气动系统)的原理图及其相应说明；`+
         `3)操作使用说明及其要求；4)维护保养说明及其要求；5)贮存、运输说明；6)车架号的位置，安全装置和安全标志的位置与说明，安全注意事项。应当装设安全监控装置的，使用维护说明书中还应当有其相应说明。`
            :
      '(2)产品质量合格证明、使用维护说明书；', undefined,['产品质量合格证明、使用维护说明书符合要求。'] ],
  ['整防爆证', [{}], '(3)具有防爆功能的叉车的整机防爆合格证；或者所用发动机(行走电机)、隔爆箱、蓄电池、接线盒、灯具、电气声响警示装置等部件的防爆合格证，其防爆级别不低于整机的防爆要求。',
        undefined,['样机为具有防爆功能的叉车的防爆合格证符合要求。'] ],
];
const item检验项 =setConfigP(undefined,true);
const itemsChk =setConfigP(undefined,false);
export const itemA技术资: string[] = ['料审备注', ];
item检验项.forEach(([name, title, initIsp], i: number) => {
    itemA技术资.push(name as string);
});
/**不同于普通机电的"印象派"做法： 结论栏目不是自动生成的，也是要人工选定！
 * */
export const Documentation =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA技术资,);
      const config = item检验项;
      const titNode=useOmnipotentPrefTitle({config, });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit,dfs]: any, i: number) => {
              return (<React.Fragment key={i}>
                  <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                      {titNode[i]}&nbsp;
                      <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                          检查结果&nbsp; <BlobInputList value={inp?.[name]?.r || ''} rows={1}
                                         datalist={dfs?.[0] ? [dfs?.[0], '无此项。'] : undefined}
                                         style={{display: 'inline-flex', width: inp?.[name]?.r?.length>15? '28rem':'14rem', maxWidth: '100%', fontSize: '1rem',}}
                                         listStyle={css({fontSize: '1rem',})}
                                         onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                      </div>
                      <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                          审查结论&nbsp; <SelectInput value={inp?.[name]?.c || ''} list={检查结论选} nMinW
                               style={{display: 'inline-flex', width: '5rem'}}
                               onChange={e => objNestSet(name, 'c', e.currentTarget.value || undefined, inp, setInp)}/>
                      </div>
                      <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                        备注<BlobInputList value={inp?.[name]?.m || ''} rows={1}
                                         style={{display: 'inline-flex', width: '12rem', maxWidth: '100%', fontSize: '1rem',}}
                                         listStyle={css({fontSize: '1rem',})}
                                         onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                      </div>
                  </div>
              </React.Fragment>);
            })}
              <hr/>
              <Text variant="h5">备注:</Text>
              <TextArea value={inp?.料审备注 || ''} rows={4}
                        onChange={e => setInp({...inp, 料审备注: e.currentTarget.value || undefined})}/>
              {children}
          </InspectRecordLayout>
      );
});

//定制: @底下的config[i]?.[4][0]获取默认的结果栏目配置！
//高阶函数   进一步去修饰 const itemRender   = ;
const guidancer=(op?:boolean)=>{
    return (orc: any, name: string, i: number, item: any, xmcspan: number, unit: any,config:any[][]) => <>
        <CCell colSpan={xmcspan}>{item}</CCell>
        <CCell>{orc?.[name]?.r ?? config[i]?.[4][0]}</CCell>
        {op? <CCell>{orc?.[name]?.c ?? '—'}</CCell>
            :
            <CCell>{concluF3Tran(orc?.[name]?.c)}</CCell>
        }
        <CCell>{orc?.[name]?.m}</CCell>
    </>;
};
/**技术资料审查
 * 【不用常用的机电检验项目列表】 而是用承压常用的配置模型。
 * */
export const DocumentationVw = ({orc, rep, op, title}: { orc: any, rep: any, op?: boolean, title: any }
) => {
    //序号不是递增生成的， 而是人工配置方式的标题！
    const render = useOmnipotentPrefMove({orc,
              config: op? item检验项:itemsChk,  tag:'Documt',itemRender:guidancer(op), pcols: 2, noNo: true, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '8rem', pageBreakInside: 'avoid'}}}>
      <Text id='Documentation' variant="h4" css={{textAlign: op? undefined:'center', marginTop:'1rem',
      }}>{title}</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["3.2%","6.8%","%","28%", "6%", "10%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-8rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell><Text css={{fontSize: '0.75rem'}}>审查项目</Text></CCell>
          <CCell>内容及要求</CCell><CCell>审查结果</CCell><CCell><Text css={{fontSize: '0.75rem'}}>审查结论</Text></CCell><CCell>备注</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
          <RepLink rep={rep} tag={'Documentation'}>
              {render}
              <TableRow>
                  <Cell split={true} colSpan={6}>
                      <div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                          <Text css={{margin: '0 2rem',fontSize:'0.875rem'}}>备注：</Text><br/>{orc.料审备注 || '／'}
                      </div>
                  </Cell>
              </TableRow>
          </RepLink>
      </TableBody>
    </Table>
    <FootFlexMenBar orc={orc} rep={rep} cap='试验人员' scap={op? undefined:'审核人员'}/>
  </>;
};
